<div class="box box-primary">
  <div class="box-header">
    <div class="box-title">
      <label for="">新股上市</label>
      <!-- <button type="submit" class="btn btn-default" (click)="toggleModal()">打印本页</button> -->
    </div>
  </div>
  <div class="box box-body">
    <!-- 查询条件 -->
    <form class="form-inline">
      <div class="form-group ext-from-item">
          <label for="vcNewstockId">股票代码：</label>
          <input type="text" [(ngModel)]="searchBody.vcNewstockId" name="vcNewstockId" class="form-control" id="vcNewstockId" placeholder="股票名称">
        </div>
      <div class="form-group ext-from-item">
        <label for="vcNewstockName">股票名称：</label>
        <input type="text" [(ngModel)]="searchBody.vcNewstockName" name="vcNewstockName" class="form-control" id="vcNewstockName" placeholder="股票名称">
      </div>
      <!-- <div class="form-group ext-from-item">
        <label for="zhName">组合名称</label>
        <input type="text" class="form-control" [(ngModel)]="searchBody.zhName" name="zhName" id="zhName" placeholder="组合名称">
      </div> -->
      <div class="form-group ext-from-item">
        <label for="listedDate">上市日期：</label>
        <div class="input-group">
          <div class="input-group-addon">
            <i class="fa fa-calendar"></i>
          </div>
          <!-- <input type="text" class="form-control pull-right" id="reservation"> -->
          <input type="text" class="form-control daterangepicker-plugin ibt-search-input" id="reservation" name="reservation">
        </div>
      </div>

      <div class="form-group ext-from-item">
        <button type="submit" class="btn btn-primary" (click)="search()">搜索</button>
        <button type="submit" class="btn btn-warning" (click)="resetSearch()">重置</button>
      </div>
      <!-- <div class="form-group ext-from-item">
        <label class="checkbox-inline control-label">
                    <input type="checkbox" id="inlineCheckbox1" value="option1">万德已上市
                </label>
        <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox2" value="option2">万德未上市
                </label>
        <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox3" value="option3">估值系统已上市
                </label>
        <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox4" value="option4">估值系统未上市
                </label>
      </div> -->
    </form>
    <!-- 查询条件 END-->
    <!-- 列表-->
    <div class="form-group ext-from-item table-scroll-content">
      <table class="table table-bordered table-hover table-striped table-keep-line">
        <tr>
          <th style="width:6%">凭证日期</th>
          <th style="width:6%">股票代码</th>
          <th style="width:6%">股票名称</th>
          <th style="width:10%">新股上市日期</th>
          <th style="width:50%">持有组合</th>
          <th style="width:6%">凭证状态</th>
          <th style="width:6%">万德状态</th>
          <th style="width:10%">估值系统状态</th>
        </tr>
        <tr *ngFor="let x of list">
          <td>
              <!-- 凭证日期 -->
            {{x.vcUpdateDate}}
          </td>
          <td>
            <!-- 股票代码 -->
            {{x.vcNewstockId}}
          </td>
          <td>
            <!-- 股票名称 -->
            {{x.vcNewstockName}}
          </td>
          <td>
            <!-- 新股上市日期 -->
            {{x.vcListingDate}}
          </td>
          <td>
            <!-- 持有组合 -->
            <div class="maxHeightBox">{{x.vcFundNames}}</div>
          </td>
          <td>
            <!-- 凭证状态 -->
            <a (click)="toggleModal(x)">{{x.voucherStatusName}}</a>
          </td>
          <td>
            <!-- 万德状态 -->
            {{x.windListedStatusName}}
          </td>
          <td>
            <!-- 估值系统状态 -->
            {{x.faListedStatusName}}
          </td>
        </tr>
      </table>
    </div>
    <!-- 列表 END-->
    <!-- 分页 Begin -->
    <app-pagination [currentPageNum]="pageInfo.currentPageNum" [pagesShow]="" [totalPages]="pageInfo.totalPages" (pageChanged)="pageNavigation($event)"></app-pagination>
    <!-- 分页 End -->
  </div>
</div>
<!-- 组合凭证状态 -->
<div class="modal fade" id="voucherStatusModal" tabindex="-1" role="dialog" aria-labelledby="组合凭证状态">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">组合凭证状态</h4>
      </div>
      <div class="modal-body">
        <!-- <form class="form-inline">
          <div class="form-group ext-from-item">
            <label for="zhName">组合名称</label>
            <input type="text" class="form-control" id="zhName" placeholder="组合名称">
          </div>
          <div class="form-group ext-from-item">
            <label for="stockName">股票名称</label>
            <input type="text" class="form-control" id="stockName" placeholder="股票名称">
          </div>
          <div class="form-group ext-from-item">
            <label for="stockId">股票代码</label>
            <input type="text" class="form-control" id="stockId" placeholder="股票代码">
          </div>
          <div class="form-group ext-from-item">
            <label for="voucherStatus">凭证状态</label>
            <input type="text" class="form-control" id="voucherStatus" placeholder="凭证状态">
          </div>
          <div class="form-group ext-from-item">
            <label for="listedDate">上市日期</label>
            <div class="input-group">
              <div class="input-group-addon">
                <i class="fa fa-calendar"></i>
              </div>
              <input type="text" class="form-control pull-right" id="reservation">
            </div>
          </div>
          <div class="form-group ext-from-item">
            <button type="submit" class="btn btn-primary">搜索</button>
            <button type="submit" class="btn btn-warning" (click)="resetSearch()">重置</button>
          </div>
        </form> -->
        <!-- 列表-->
        <table class="table table-bordered table-hover table-striped table-keep-line">
          <tr>
            <th>更新日期</th>
            <th>组合代码</th>
            <th>持有组合</th>
            <th>股票代码</th>
            <th>股票名称</th>
            <th>新股上市日期</th>
            <th>凭证状态</th>
            <th>中签数量</th>
          </tr>
           <tr *ngFor="let y of modalList?.voucherList">
            <td>
              <!-- 更新日期 -->
              {{y?.vcUpdateDate}}
            </td>
            <td>
              <!-- 组合代码 -->
              {{y?.vcFundCodes}}
              </td>
            <td>
              <!-- 组合名称 -->
              {{y?.vcFundName}}
            </td>
            <td>
              <!-- 股票代码 -->
              {{modalList?.vcNewstockId}}
            </td>
            <td>
              <!-- 股票名称 -->
              {{modalList?.vcNewstockName}}
            </td>
            <td>
              <!-- 新股上市日期 -->
              {{y?.vcListingDate}}
            </td>
            <td>
              <!-- 凭证状态 -->
              {{modalList?.voucherStatusName}}
            </td>
            <td>
              <!-- 中签数量 -->
              {{y?.lSharesStr}}
            </td>
          </tr>
        </table>
        <!-- 列表 END-->
      </div>
      <div class="modal-footer">
        <label style="float:left">合计{{voucherListLength}}条</label>
        <button type="button" class="btn btn-default col-sm-1 col-sm-offset-5" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
<!-- 组合凭证状态 END-->
